<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>可爱的跳动加载特效</title>
		<!-- <meta http-equiv="refresh" content="2;url=轮播图.html"> -->
		<link rel="shortcut icon" href="img/favicon.ico">
		<style type="text/css">
			/* *{
				margin: 0 auto;
				padding: 0;
			} */

			body {
				/* 弹性盒子 */
				display: flex;
				/* 灵活的项目将垂直显示，正如一个列一样。 */
				flex-direction: column;
				/* 弹性盒子对齐方式 ==》左右居中*/
				justify-content: center;
				/* 弹性盒子对齐方式 ==》上下居中*/
				align-items: center;
				background-color: #e8e8e8;
				/* 视窗高度的百分比（ 1vh 代表视窗的高度为 1%） */
				height: 50vh;
			}

			.loader {
				width: 48px;
				height: 48px;
				margin: auto;
				position: relative;
			}

			/* :before 选择器向选定的元素前插入内容。
			使用content 属性来指定要插入的内容。
			*/
			.loader::before {
				content: "";
				width: 48px;
				height: 5px;
				background: #F18B8B;
				position: absolute;
				top: 60px;
				left: 0%;
				border-radius: 50%;

				/* animation（动画）：
				解释：
				shadow01 		:指定要绑定到选择器的关键帧的名称,可自行更改
				0.5     	 	:动画指定需要多少秒或毫秒完成
				linear(线性)  	:设置动画将如何完成一个周期
				infinite 		:指定动画应该播放无限次
				*/
				animation: shadow01 0.5 linear infinite;
			}

			/* :after 选择器向选定元素的最后子元素后面插入内容。
			使用content 属性来指定要插入的内容。 
			*/
			.loader::after {
				content: "";
				width: 100%;
				height: 100%;
				background: #F18B8B;
				position: absolute;
				top: 0;
				left: 0%;
				border-radius: 4px;
				animation: jump01 0.5s linear infinite;
			}

			@keyframes jump01 {
				15% {
					border-bottom-right-radius: 3px;
				}

				15% {
					transform: translateY(9px) rotate(22.5deg);
				}

				50% {
					transform: translateY(18px) scale(1, 0.9)rotate(45deg);
					border-bottom-right-radius: 40px;
				}

				75% {
					transform: translateY(9px) rotate(67.5deg);
				}

				100% {
					transform: translateY(0) rotate(90deg);
				}
			}

			@keyframes shadow01 {

				0%,
				100% {
					transform: scale(1, 1);
				}

				50% {
					transform: scale(1.2, 1.2);
				}
			}
		</style>
	</head>
	<body>
		<div class="loader"></div>
		<div class="title">不要急，正在加载中...</div>
		<script>
			setTimeout("javascript:location.href='轮播图.html'", 1000);
		</script>

	</body>
</html>
